<template>
	<view class="searchbox">
		<view id="search">
			<view class="t-search">
				<!-- <uni-status-bar /> -->
				<u-search inputAlign="left" :focus="true" placeholder="搜索用户昵称"   v-model="orgs.TrueName"
					height="32" action-text=" "></u-search>
				<!-- <view class="sub" @click="search">
					搜索
				</view> -->
				<view class="search" @click="search">搜索</view>
			</view>
			<view class="all">
				<view @click="toSelectCity" class="city-two">
						<uni-icons type="location" size="24" color="#a695f3"></uni-icons>
						<text v-if="orgs.City">{{orgs.City}}</text>
						<text v-else>全国</text>
				</view>
				<view class="sexbox" @click="showsex = true" >
					{{orgs.Sex?orgs.Sex:'不限'}}
					<image class="arrowimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<scroll-view @scrolltolower="scrolltolower" :refresher-triggered="triggered" scroll-anchoring="true"
			refresher-default-style="white" refresher-background="#111" lower-threshold="1000" scroll-y="true"
			:style="{height: height+'px'}" class="t-scroll">
			<u-empty v-if="!loading&&list.length===0"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
				width="64" height="64" text="未搜索到相关会员信息"></u-empty>
			<view class="t-list">
				<view v-for="(item,index) in list" class="item" @click="nav_to(`/pages/user/user_visitor?id=${item.ID}`)" :key="index">
					<view >
							<view class="top">
								<view class="tagbox">
									<view class="tagcolor" v-if="item.Tag == '教练'">教练</view>
									<view class="tagcolor2" v-if="item.Tag == '星助教'">星助教</view>
								</view>
								<view class="imgbox">
									<image :src="item.UserImgs + '?x-oss-process=image/resize,m_fill,w_700'"
										mode="aspectFill" />
								</view>
								<view class="online">{{ getTime(item.UpdateTime) }}在线</view>
								<!-- <view class="pop" v-if="item.PopSeq>0">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/hot.png" class="hot_icon">
									</image>{{item.SeqStr}}{{item.PopSeq}}
								</view> -->


								<view class="bottomContent">
									<view class="personInfo">
										<view class="imageContent">
											<image :src="item.UserImgs + '?x-oss-process=image/resize,m_fill,w_700'"
												mode="aspectFill"></image>
										</view>
										<view class="textContent">
											<text lines="1" class="textContentName hiddenText">{{ $util.entitiesToUtf16(item.Name) }}</text>
											<text lines="1" decode="true"
												class="textContentInfo">{{ getYearStr(item.Birthday) }}后｜{{ item.City ? item.City : '' }}</text>
										</view>
									</view>
									
									<view class="distance">
										<uni-icons type="location-filled" size="20" color="white"></uni-icons>
										<text> {{item.Distance?item.Distance:'--'}} km</text>
									</view>
								</view>
							</view>
						</view>
				</view>
			</view>
		</scroll-view>
		<u-picker :show="showsex" immediateChange @confirm="setFeeRule" @cancel="showsex=false" :columns="apportion"></u-picker>
	</view>
</template>

<script>
	const { safeArea, windowHeight } = uni.getSystemInfoSync()
	export default {
		data() {
			return {
				// 性别
				apportion: [
					[
						'不限',
						'男生',
						'女生',
					]
				],
				showsex:false,
				city: '',
				sex: '',
				index: 2,
				user: {},
				height: 0,
				loading: true,
				list: [],
				status: 'more', //more noMore
				triggered: false,
				PageIndex: 1,
				PageSize: 30,
				longitude: 0,
				latitude: 0,
				popRank: [], //人气榜
				conRank: [], //消费榜单
				orgs: {
					Sex: '',
					UserType: '',
					City: '',
					TrueName: '',
				}
			}
		},
		async onLoad(e) {
			this.$nextTick(async () => {
				const height = await this.getHeight('#search')
				this.height = windowHeight - height - 40
			})
			this.orgs.Sex = uni.getStorageSync('Sex')
		},
		onShow() {
			let that = this
			uni.$on('getSelectCity', function(data) {
				if (data.name != '全国') {
					that.orgs.City = data.name + '市'
				} else {
					that.orgs.City = that.orgs.City 
				}
			})
		},
		onUnload() {
			uni.$off('getSelectCity');
		},
		methods: {
			setFeeRule(e) {
				this.orgs.Sex = e.value[0];
				// this.getList()
				this.showsex = false;
			},
			Changesex(index){
				if(index == 1){
					this.orgs.Sex = '男'
				}else if(index == 2){
					this.orgs.Sex = '女'
				}else{
					this.orgs.Sex = ''
				}
			},

			toSelectCity() {
				uni.navigateTo({
					url: '/pages/city/cityList'
				})
			},
			async sub() {
				let res = await this.$api.post('/Member/PageList',{
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					Last_Lat: 0,
					Last_Lng: 0,
					Sex:this.sex,
					UserActiveStatus:'',
					City:this.city
				})
				const params = { sex: this.sex, city: this.city }
				this.user = uni.getStorageSync('user');
				uni.setStorageSync('Sex', this.sex);
				uni.$emit('getFiltrate', params)
				uni.navigateBack({
					delta: 1
				})
			},


			search() {
				this.PageIndex = 1
				this.getList()
			},
			async getList() {
				return new Promise(resolve => {
					Promise.all([this.getMember(), this.getAcceptGift(), this.getSendGift()]).then(res => {
						//循环查询用户的人气榜，如果该用户同时 人气榜和消费榜都有名，优先显示 人气榜
						this.list = res[0].map((v, i) => {
							let index = res[1].findIndex((x) => x.ID == v.ID);
							if (index > -1) {
								v.rankText = `人气榜第${index+1}名`
								return v
							}
							let indexXf = res[2].findIndex((x) => x.ID == v.ID);
							if (indexXf > -1) {
								v.rankText = `月消费榜第${indexXf+1}名`
								return v
							}
							return v
						})

						this.loading = false
						resolve(true)
					})
				})
			},
			async getMember() {
				const p = this.getParams()
				let res = await this.$api.post(p.url, p.params)
				if (res.data) return res.data
				return []
			},
			async getAcceptGift() {
				//人气榜单数据
				let res = await this.$api.post('Member/AcceptGiftReports', {
					PageIndex: 1,
					PageSize: 300,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				this.popRank = res.data || []
				if (res.data) return res.data
				return []
			},
			async getSendGift() {
				//消费榜单数据
				let res = await this.$api.post('Member/SendGiftReports', {
					PageIndex: 1,
					PageSize: 300,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				this.conRank = res.data || []
				if (res.data) return res.data
				return []
			},
			getParams() {
				let sex = this.orgs.Sex
				let newSex = (sex==''||sex=='不限')?'':(sex.split('生'))[0]
				let params = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					Last_Lat: 0,
					Last_Lng: 0,
					...this.orgs,
					Sex:newSex
				}
				params.UserActiveStatus = ''
				return { url: 'Member/PageList', params }
			},
			toRoute(url) {
				uni.navigateTo({
					url
				})
			},
			async scrolltolower() {
				if (this.status !== 'more') return;
				this.PageIndex++;
				this.status = 'loading';
				const data = await this.getMember();
				if (data.length < this.PageSize) {
					this.status = 'noMore'
				} else {
					this.status = 'more'
				}
				const list = data.map((v, i) => {
					let index = this.popRank.findIndex((x) => x.ID == v.ID);
					if (index > -1) {
						v.rankText = `人气榜第${index+1}名`
						return v
					}
					let indexXf = this.conRank.findIndex((x) => x.ID == v.ID);
					if (indexXf > -1) {
						v.rankText = `月消费榜第${indexXf+1}名`
						return v
					}
					return v
				})
				this.list = [...this.list, ...list];
			},
			genYearLabel(date) {
				if (!date) return '00后'
				const year = new Date(date).getFullYear();
				if (year < 1900) return '00后';
				return `${year.toString().substring(2,3)}0后`;
			},
			cancel() {
				uni.navigateBack()
			},
			getHeight(id) {
				return new Promise(resolve => {
					let query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect();
					query.exec((res) => {
						resolve(res[0].height)
					})
				})
			},
		},
		computed: {
			getTime() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();
					let d2 = new Date();
					let timestamp2 = d2.getTime();
					if (timestamp2 - timestamp < (30 * 24 * 60 * 60 * 1000)) {
						return this.$u.timeFrom(timestamp, 'mm-dd hh:MM');
					} else {
						return this.$u.date(timestamp, 'mm-dd hh:MM');
					}
				}
			},
		}
	}
</script>

<style lang="scss">
page{
	// background-color: #fff !important;
}
.searchbox{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.sexbox{
	width: 120rpx;
    height: 56rpx;
    // background-color: #fff;
	border: 1rpx solid #a695f3;
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
    color: #a695f3;
	font-size: 24rpx;
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;
	.arrowimg{
		width: 20rpx;
		height: 20rpx;
		display: block;
	}
}
.city-two {
			// min-width: 120rpx;
    		height: 56rpx;
			// background-color: #eeeeee;
			border: 1rpx solid #a695f3;
			box-sizing: border-box;
			padding: 0 20rpx;
			// margin-top: 10rpx;
			display: flex;
			align-items: center;
			border-radius: 28rpx;
			margin-right: 20rpx;
			text {
				color: #a695f3;
				font-size: 24rpx;
			}
		}
.all {
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		display: flex;
	}
	.sex {
		width: 100%;

		.xinbie {
			font-size: 14px;
			color: #000;
		}

		.sex_shan {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.men {
				height: 110rpx;
				width: 120rpx;
				color: #000;
				background-color: #eeeeee;
				border-radius: 10rpx;
				text-align: center;
				line-height: 110rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.nan {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					text-align: center;
					margin-top: 10rpx;
					color: #999;
				}
			}

			.tab4 {
				background-color: #252525;
				color: #fff !important;
			}
		}
	}

	.city {
		width: 100%;
		margin-top: 40rpx;

		.city-one {
			font-size: 14px;
			color: #000;
		}

		.city-two {
			// height: 80rpx;
			
			width: 100%;
			background-color: #eeeeee;
			box-sizing: border-box;
			padding-left: 10rpx;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			border-radius: 8rpx;
			margin-right: 10rpx;
			padding: 8.6rpx 0;
			text {
				color: #000;
			}
		}
	}

	view {
		box-sizing: border-box;
	}
	.t-search {
		margin: 0 34rpx;
		padding-top: 10rpx;
		padding-bottom: 15rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		/deep/ .u-search__content{
			flex: none !important;
			width: 100%;
		}
		.sub {
			width: 80rpx;
			height: 30rpx;
			border-radius: 8rpx;
			// margin-top: 80rpx;
			background-color: #000;
			color: #fff;
			font-size: 15px;
			// letter-spacing: 1.5px;
			text-align: center;
			line-height: 30rpx;
			margin-left: -64rpx;

		}
	}

	.t-scroll {
		height: calc(100vh - 130rpx - var(--status-bar-height));
	}

	.t-list {
			padding-left: 26rpx;
			padding-right: 26rpx;
			padding-bottom: 100rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				margin-top: 20rpx;
				width: 340rpx;
				height: 450rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background: #26252B;

				.top {
					position: relative;
					height: 450rpx;
					width: 340rpx;

					.tagbox {
						position: absolute;
						left: 0;
						top: 0;
						width: 80rpx;
						height: 40rpx;
						border-radius: 0 0 40rpx 0;
						z-index: 1000;

						.tagcolor {
							text-align: center;

							line-height: 40rpx;
							width: 100%;
							height: 100%;
							font-size: 20rpx;
							border-radius: 0 0 20rpx 0;

							color: black;
							background: linear-gradient(90deg, #C79F67 0%, #ECD5A0 100%);
						}

						.tagcolor2 {
							text-align: center;
							line-height: 40rpx;
							font-size: 20rpx;
							width: 100%;
							height: 100%;
							border-radius: 0 0 20rpx 0;
							color: #fff;

							background: linear-gradient(90deg, #E076E3 0%, #D67EEF 100%);
						}
					}

					.imgbox {
						position: relative;
						z-index: 1;
						height: 450rpx;
						width: 340rpx;

						image {
							height: 100%;
							width: 100%;
						}

					}

					.online {
						position: absolute;
						z-index: 10;
						top: 10rpx;
						right: 14rpx;
						color: #FFFFFF;
						font-size: 24rpx;

						&::before {
							display: inline-block;
							content: "";
							height: 16rpx;
							width: 16rpx;
							border-radius: 16rpx;
							background: #27BA2C;
							margin-right: 6rpx;
						}
					}

					.pop {
						box-sizing: border-box;
						position: absolute;
						z-index: 10;
						bottom: 140rpx;
						left: 7rpx;
						width: 220rpx;
						font-size: 24rpx;
						font-weight: bold;
						line-height: 40rpx;
						padding-left: 10rpx;
						color: #fff;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.bottomContent {
						box-sizing: border-box;
						position: absolute;
						z-index: 10;
						bottom: 0;
						left: 0;
						width: 340rpx;
						height: 145rpx;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
						align-items: center;
						padding: 10rpx 15rpx 0rpx;
						display: flex;
						flex-direction: column;
						.personInfo{
							display: flex;
							
							.imageContent {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								margin: 4rpx 0 4rpx 0;
								overflow: hidden;

								>image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.textContent {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								margin-left: 20rpx;

								.textContentName {
									width: 215rpx;
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 1);
									font-size: 28rpx;
									font-family: PingFang-SC-Medium;
									font-weight: normal;
									text-align: left;
									white-space: nowrap;
									line-height: 40rpx;
								}

								.textContentInfo {
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 0.6);
									font-size: 20rpx;
									font-family: PingFang-SC-Medium;
									font-weight: normal;
									text-align: left;
									white-space: nowrap;
									line-height: 28rpx;
								}
							}
						}
						
						.distance{
							display: flex;
							align-items: center;
							width: 100%;
							margin-top: 15rpx;
							margin-left: 30rpx;
							>text{
								color: white;
								font-size: 22rpx;
							}
						}
					}
				}
			}
		}
	.search{
		width: 122rpx;
		margin: 0 34rpx;
		// margin-bottom: 20rpx;
		padding: 14rpx 0;
		border-radius: 100rpx;
		background-image: linear-gradient(to bottom, #a695f3, #3e56f5);
		text-align: center;
		color: #fff;
	}
</style>